<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue组件的全局注册</title>
  <script src="123.js"></script>
</head>
<body>

<div id="app">

  <model1></model1>
  <model1></model1>
  <model1></model1>

</div>
<hr/>
<div id="app1">

  <model1></model1>
  <model1></model1>
  <model1></model1>

</div>


</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  //通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。
  Vue.component("model1",{

    template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
    data:function(){
      return {
        title:"hello vue"
      }
    },
    methods:{
      btnfn:function(){
        alert("hello !!!");
      }
    }
  });

  new Vue({
    el:'#app'
  })
  new Vue({
    el:'#app1'
  })


</script>

</html>